import React, { useState, useCallback } from 'react';
export default function App() {
  console.log('app渲染了');
  const [count, setCount] = useState(0);
  // 如果是空数组则回调函数只创建一次.如果不写第二个参数,或第二个参数监听数据,回调函数则创建多次
  // const handle = () => {
  //   console.log(count)
  //   setCount(count + 1)
  // }
  // console.log(count);
  // const handle = useCallback(() => {
  //   console.log(count);
  //   setCount(count + 1);
  // }, []);// 无法持续+1的原因:闭包,count的引用没有发生改变,一直是第一次渲染时引用的0,0+1永远是1
  const handle = useCallback(() => {
    setCount((count) => {
      console.log(count);
      return count + 1;
    });
  }, []); // 第二个参数是空数组,那这个函数只会创建一次,因为闭包,count还是指向第一次
  // 渲染时的哪个旧的count,而重新渲染后,新的count在新的作用域里? 这个函数的count
  // 如何更新为新的count,通过定义一个新的回调函数,再传参(利用参数会往外层作用域找)的方式,来更新count的引用
  return (
    <div>
      <div>{count}</div>
      <button onClick={handle}>按钮</button>
    </div>
  );
}
